查看原文
其他

AI骑士团正式开源!干货分享!!

老菜喵 老菜喵
2024-10-10

很抱歉,了这么久,2023 真的挺难的,带薪摸鱼的时间都少了,文章和Demo了挺久的(脸红)。

咕咕咕?


0.1 不鸽了!开源了!

趁着国庆长假,老菜喵把AIGC卡牌游戏的代码整理了下,正经开源!!并添加了多语言AI翻译支持~

转发本文,后台回复 “已转发” ,抢先获得抽卡和大厅部分源码!)

转发免费获取~

友情提醒 本文有AI辅助,让我们享受用AI摸鱼的快乐~


代码AI含量:60%+

文章AI含量:50%+



(点击阅读原文,可以体验项目的H5版本!)


1.0 使用深度图让AIGC的图片动起来

之前的版本中我们使用了MidJourney生成了一次2次元风格的角色。


老菜喵尝试了Live2D和Spine动画加上AIGC工作流,需要的人工比较多,效果也不尽人意。

这边转换了思路,决定使用上古的方法,使用深度图让图片动起来,这里使用LeiaPix网站生成,LeiaPix的模型有AI训练,对纸片人效果更友好。

(https://convert.leiapix.com/animation)

Leiapix效果

LeiaPix可以把角色转换成深度图或者视频,其中深度图导出是免费的。

生成的角色深度图

颜色越深,代表这个位置距离视觉方向越远

接下来我们使用GPT-4 写个深度图的shader


这个shader 主要对图片的shader 的uv 进行基于深度图的偏移,图片越远颜色越淡,对应的RGB色值也越小,相应的偏移量也越小,不同远近的区域就会产生视觉偏差



这个shader 相比LeiaPix的迭代算法效果比较简单,但是运算量很少,更适合游戏内容。

针对这个shader优化,我们给深度值加上一个阈值threshold,来过滤比较远的内容,让用户聚焦在近景。

float depth = (CCSampleWithAlphaSeparated(depthTexture, uv).r-threshold)*0.1; 
if(depth<0.) depth = 0.;

添加阈值

同时我们不希望SinCos的曲线不停的变化,希望在角色转身的时候有一定的停留,效果上更自然,这里通过smoothstep 参数给竖向和横向增加一些停顿时间。

  void depthMove(inout vec4 o,in vec2 uv0,in vec4 depthParams){
    vec2 uv = uv0;
    float time = cc_time.x;
    //get depth
    float depth = (CCSampleWithAlphaSeparated(depthTexture, uv).r-threshold)*0.1; 
    if(depth<0.) depth = 0.;
    float x = smoothstep(pauseParams.x,pauseParams.y,sin(time*depthParams.x));
    float y =smoothstep(pauseParams.z,pauseParams.w,cos(time*depthParams.y));
    vec2 offsetUv = (vec2(x,y)*2.-1.)*depthParams.zw*(depth);
    uv = uv *(1.+depth*0.3*sin(time*0.1));
    o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv+offsetUv);
  }

波形图如下,在角色转身的时候,偏移量会保持不变一定时间,产生转身的延迟。

波形图


最终效果

接下来给所有角色都生成 深度图 ,替换角色的时候,通过代码动态替换角色图片和深度图。

角色页面深度图演示

同时对战页面也使用了深度图,让场景更加生动

对战页面深度图演示

2.0 如何使用AI更好的辅助代码

之前文章介绍了AIGC辅助写代码,生成贪吃蛇游戏,其实踩了很多坑,AI有他擅长不擅长的。

  • Utils 工具类和管理类方法可以使用AI辅助生产,这类方法不需要太多上下文,是AI比较擅长的
  • 如果使用AI给代码加注释,建议先给基础的注释或者保证正确的方法和变量命名
  • 针对View类的Class 建议自己写效率更多,需要较多的上下文,使用AI反而会影响思路,建议自己动手。

下面分享一些我和AI对话的实战,看下老菜喵如何用AI生成合适的代码。

创建单例

这里使用GPT-4 创建了大量单例,如经验管理,装备管理,属性管理等。

只需要简单修改就可以投入使用。

这里知识修改了每个等级所需要的经验等级,由于老菜喵有策划经验,所以在数值上没有额外咨询AI

正常的流程是AI生产好代码好,数值部分需要策划运营同学参与的;所以如果我们要把AI加入工作流,整个团队都要参与到AIGC的流程中。

该项目使用GPT-4生产了大量单例的管理类代码,占比接近50%,节省了老菜喵大量时间(整个程序投入了8个工作日)。

属性随机生成

前段调用还是建议自己封装,这部分设计到引擎的代码比较多,如过和AI沟通的成本大于自己开的成本,完全建议自己开发

获得新装备时随机生成多个属性

没必要完成陷入对AI的崇拜陷阱内,反而容易降低工作效率

生成工具类

生成工具类代码一直是AI的优势,这里使用AIGC生成了贝塞尔曲线的特效,老菜喵自己增加了初始化方法,方便动态设置起点和终点。

特效贝塞尔曲线运动

特效的贝塞尔曲线运动

框架管理和翻译

老菜喵平时喜欢写英文注释,通过AI来添加多语言注释


同时我也在引擎内集成了GPT,可以自动翻译i18n的配置和场景内的文字到多语言。

GPT翻译面板

获取抢先版

转发本文到朋友圈,发送到 老菜喵 公众号,即可获得源码下载链接。

后台私信获取下载链接

点赞转发是老菜喵继续更新的动力^ ^

更多干货准备更新

  • 少女骑士团更多AI开发干货
  • 策划和音乐的AIGC干货分享!
  • AI自动化翻译游戏,出海不用愁!
  • AI+UGC!!

评论抽奖

老菜喵使用Midjouney制作了一些图片并做成了实物奖品。


感谢 Cocos 友情赞助 <3

大家对AIGC制作游戏有什么想法和建议,可以在文本评论,10月20日 评论点赞最高 的2个同学可以获得上图的 AIGC短袖 一件喔。

AI做游戏文章列表


点击阅读原文线上试玩



内容由AI生成
继续滑动看下一个
老菜喵
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存